<template>
    <div class="fillcontain">
        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                  type="index"
                  width="100">
                </el-table-column>
                <el-table-column
                    property="id"
                    label="id"
                    width="220">
                </el-table-column>
                <el-table-column
                  property="account"
                  label="账号"
                  width="220">
                </el-table-column>
                <el-table-column
                  property="userName"
                  label="用户姓名"
                  width="220">
                </el-table-column>
                <el-table-column
                  property="registerTime"
                  label="注册时间">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data(){
            return {
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 10,
                count: 0,
                currentPage: 1,
            }
        },
    	components: {
    	},
        created(){
            this.getUsers();
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getUsers()
            },
            getUsers() {
                let pagerequst={"pageNum":this.currentPage,"pageSize":this.limit}
                axios.post('http://myphoenixshop.cpolar.io/findPage',pagerequst).then(res=>{
                    console.log(res);
                    this.tableData=res.data.data.content;
                    this.count=res.data.data.totalSize;
                    console.log(this.count);
                })

            },
            handleDelete(index, row) {
                let pagerequst={"id":[row.id]}
                axios.post('http://myphoenixshop.cpolar.io/deleteUser',pagerequst).then(res=>{
                    console.log(res);
                })
                 console.log(row.id);
            }
        }

    }
</script>

<style lang="less">
	@import '../style/mixin';
    .table_container{
        padding: 20px;
    }
</style>
